<template>
	<div class="life-detail oilwrap">
		<header-nav></header-nav>
		<h2 class="ldet-title tc pt4 pb4">今日油价</h2>
		<p class="ldet-updatatime tc mb5">更新时间：{{ updatatime }}</p>
		<div class="oil-tit oil-grey mt tc clearfix">
			<span class="oil-s oil-s1">地区</span>
			<span class="oil-s oil-s2">89号汽油</span>
			<span class="oil-s oil-s3">92号汽油</span>
			<span class="oil-s oil-s4">95号汽油</span>
			<span class="oil-s oil-s5">0号柴油</span>
			<span class="oil-s oil-s6">90号汽油</span>
		</div>
		<div class="oil-tit oil-txt tc clearfix" v-for="(o,index) in oildata" v-bind:item="o" v-bind:index="index">
			<span class="oil-s oil-s1">{{ o.prov }}</span>
			<span class="oil-s oil-s2">{{ o.p89 }}</span>
			<span class="oil-s oil-s3">{{ o.p92 }}</span>
			<span class="oil-s oil-s4">{{ o.p95 }}</span>
			<span class="oil-s oil-s5">{{ o.p0 }}</span>
			<span class="oil-s oil-s6">{{ o.p90 }}</span>
		</div>
	</div>
</template>

<script>
	import axios from 'axios'
	import HeaderNav from '../../components/header.vue'
	export default{
		components : {
			HeaderNav
		},
		data(){
			return{
				updatatime:'',
				oildata:[]
			}
		},
		mounted: function(){
			document.getElementsByTagName("body")[0].className="bgfff"; 
			let url = '/api/138-46';
			let sign = 'FD23B802A29A46D14CE759F93EAC3125';
			axios({
				method: 'post',
				url: url,
				params: {
					'showapi_appid':'54164',
			    	'showapi_sign':sign
				}
			}).then((res) => {
				console.log(res.data.showapi_res_body.list)
				this.updatatime = res.data.showapi_res_body.list[0].ct
				this.oildata = res.data.showapi_res_body.list
			})
		},
		beforeDestroy () {
		    document.getElementsByTagName("body")[0].className="";
		}
	}
</script>

<style>
	.oil-tit.oil-grey{background-color: #f3f3f3; font-weight: bold;}
	.oil-tit .oil-s{display: block; float: left; padding:.6rem 0; vertical-align: middle;}
	.oil-tit .oil-s1{width:14%}
	.oil-tit .oil-s2{width:17.2%}
	.oil-tit .oil-s3{width:17.2%}
	.oil-tit .oil-s4{width:17.2%}
	.oil-tit .oil-s5{width:17.2%}
	.oil-tit .oil-s6{width:17.2%}
	.oil-txt{border-bottom: 1px solid #ececec; }
</style>